import { Radio, Table, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import { RenderNumberPct, RenderNumber } from '@/utils/buildReturnValue';

function setData(list) {
  const columns = [
    {
      key: 'month',
      dataIndex: 'month',
      title: '回款系数',
      align: 'center',
    },
  ];
  const dataSource = [];
  const cloneList = _.cloneDeep(list);
  const formatOne = _.unionBy(cloneList, 'typeName');
  _.forEach(formatOne, item => {
    const children = [];
    const isSame = _.filter(cloneList, x => x.typeName === item.typeName);
    _.forEach(isSame, subItem => {
      children.push({
        key: subItem.proProductType,
        title: subItem.proProductType,
        align: 'center',
        children: [
          {
            title: '测算版',
            dataIndex: `${subItem.proProductType}-calculateCoefficientMap`,
            key: `${subItem.proProductType}-calculateCoefficientMap`,
            align: 'center',
            render: (text, row) => {
              let str = '';
              _.forEach(row.data, x => {
                if (x.proProductType === subItem.proProductType) {
                  str = x.calculateCoefficientMap[row.id] * 100;
                }
              });
              if (_.isNaN(str)) {
                return '-';
              }
              return <RenderNumber value={str} precision={3} suffix="%" />;
            },
          },
          {
            title: '实际版',
            dataIndex: `${subItem.proProductType}-actualCoefficientMap`,
            key: `${subItem.proProductType}-actualCoefficientMap`,
            align: 'center',
            render: (text, row) => {
              let str = '';
              _.forEach(row.data, x => {
                if (x.proProductType === subItem.proProductType) {
                  str = x.actualCoefficientMap[row.id] * 100;
                }
              });
              if (_.isNaN(str)) {
                return '-';
              }
              return <RenderNumber value={str} precision={3} suffix="%" />;
            },
          },
          {
            title: '差异',
            dataIndex: `${subItem.proProductType}-differenceCoefficientMap`,
            key: `${subItem.proProductType}-differenceCoefficientMap`,
            align: 'center',
            render: (text, row) => {
              let str = '';
              _.forEach(row.data, x => {
                if (x.proProductType === subItem.proProductType) {
                  str = x.differenceCoefficientMap[row.id] * 100;
                }
              });
              if (_.isNaN(str)) {
                return '-';
              }
              return <RenderNumberPct value={str} precision={3} suffix="%" />;
            },
          },
        ],
      });
    });
    columns.push({
      key: item.typeName,
      title: item.typeName,
      align: 'center',
      children,
    });
  });

  // 重组dataSource
  for (let i = 1; i <= 24; i += 1) {
    dataSource.push({
      id: i,
      month: `第${i} 个月`,
      data: cloneList,
    });
  }

  return { columns, dataSource };
}

export default function SubComponentsThree({ data }) {
  const [tabKey, setTabKey] = useState('VS项目实际版');
  const [radioKey, setRadioKey] = useState(0);
  const [currentData, setCurrentData] = useState({});
  const [dataSource, setDataSource] = useState([]);
  const [columns, setColumns] = useState([]);
  useEffect(() => {
    if (!_.isEmpty(tabKey) && !_.isEmpty(data)) {
      setColumns([]);
      setDataSource([]);
      setCurrentData({});
      const filterData = _.filter(data, x => x.name === tabKey);
      if (!_.isEmpty(filterData)) setCurrentData(filterData[0]);
    }
  }, [data, tabKey]);
  useEffect(() => {
    if (!_.isEmpty(currentData)) {
      const tableList =
        currentData.stageCoeffcienDifferenceVoList[radioKey].coeffcienDifferenceDetailVoList;
      // 处理数据结构
      const getData = setData(tableList);
      setColumns(getData.columns);
      setDataSource(getData.dataSource);
    }
  }, [currentData, radioKey]);
  if (_.isEmpty(data)) return <></>;
  return (
    <div className="approve-box-content-paragraph">
      <div className="approve-box-content-paragraph-title">回款系数差异</div>
      <Tabs onChange={key => setTabKey(key)} activeKey={tabKey} animated={false}>
        <Tabs.TabPane tab="VS项目实际版" key="VS项目实际版" />
        <Tabs.TabPane tab="VS城市实际版" key="VS城市实际版" />
      </Tabs>
      <Radio.Group
        className="approve-box-content-paragraph-sub-title"
        value={radioKey}
        onChange={ev => setRadioKey(ev.target.value)}
      >
        {_.map(currentData.stageCoeffcienDifferenceVoList, (item, idx) => (
          <Radio value={idx} key={idx}>
            {item.stageName}
          </Radio>
        ))}
      </Radio.Group>
      <Table
        size="middle"
        rowKey="id"
        bordered
        dataSource={dataSource}
        columns={columns}
        pagination={false}
      />
    </div>
  );
}
